import React from 'react';
import {
    View,
    Text,
    FlatList,
    InteractionManager,
    TouchableOpacity
} from 'react-native';
  
import { connect } from 'react-redux';
import CLNavigatorHeader from '../../component/CLNavigatorHeader';
import {getLogisticsInfo} from './actions';
import themeconfig from '../../config/theme';
import Communications from 'react-native-communications';

class Logistics extends React.Component {

  static navigationOptions = ({navigation, screenProps}) => {
    let header = (<CLNavigatorHeader navigation={navigation} title="物流信息"/>);
    return {header}
  };

  constructor(props) {
    super(props);
    this.orderid = props.navigation.state.params.orderid;
  }

  componentDidMount() {
    InteractionManager.runAfterInteractions(() => {
      this.props.getLogisticsInfo(this.orderid);
    });
  }

  _renderItem = (item) => {
    let preView = undefined;
    if (item.index == 0) {
      preView = <View style={{flex: 1, alignItems: 'center'}}>
        <View style={{ marginTop: 10, backgroundColor: themeconfig.maincolor,width: 16, height: 16, borderRadius: 8, borderWidth: 2, borderColor: '#eee'}}></View>
        <View style={{ flex: 1, backgroundColor: '#eee',width: 1}}></View>
      </View>
    } else if (item.index == this.props.list.length - 1) {
      preView = <View style={{flex: 1, alignItems: 'center'}}>
        <View style={{ backgroundColor: '#eee',width: 1, height: 10}}></View>
        <View style={{ backgroundColor: '#eee',width: 8, height: 8, borderRadius: 4}}></View>
        <View style={{ flex: 1, backgroundColor: '#eee',width: 1}}></View>
        <View style={{ backgroundColor: '#eee',width: 40, height: 1}}></View>
      </View>
    } else {
      preView = <View style={{flex: 1, alignItems: 'center'}}>
        <View style={{ backgroundColor: '#eee',width: 1, height: 10}}></View>
        <View style={{ backgroundColor: '#eee',width: 8, height: 8, borderRadius: 4}}></View>
        <View style={{ flex: 1, backgroundColor: '#eee',width: 1}}></View>
      </View>
    }

    return <View style={{flexDirection: 'row', marginRight: 10, marginBottom: 0}}>
        <View style={{width: 40, alignItems: 'center'}}>
          {preView}
        </View>
        <View style={{flex: 1, marginTop: 10}}>
          <Text style={{color: item.index == 0 ? themeconfig.maincolor : 'black'}}>{item.item.status}</Text>
          <Text style={{color: item.index == 0 ? themeconfig.maincolor : 'black', marginTop: 8}}>{item.item.time}</Text>
          <View style={{ backgroundColor: '#eee',height: 1, marginTop: 10}}/>
        </View>
      </View>
  }

  render() {
    return <View style={{flex: 1, backgroundColor: 'white', width: null, height: null}}>
              <View style={{marginLeft: 10, marginRight: 10}}>
                <Text style={{marginTop: 10}}>承运来源: {this.props.name}</Text>
                <Text style={{marginTop: 10}}>运单编号: {this.props.number}</Text>
                <View style={{marginTop: 10, marginBottom: 10, flexDirection: 'row'}}>
                  <Text>官方电话: </Text>
                  <TouchableOpacity onPress={() => {
                    Communications.phonecall(this.props.tel, false);
                  }}>
                    <Text style={{color: themeconfig.maincolor}}>{this.props.tel}</Text>
                  </TouchableOpacity>
                </View>
              </View>
              <View style={{ backgroundColor: '#eee',height: 1}}/>
              <FlatList
                style={{flex: 1}}
                data={this.props.list}
                renderItem={this._renderItem}
              />
    </View>
  }

}

const mapStateToProps = state => ({
  name: state.order.logisticsName,
  tel: state.order.logisticsTel,
  number: state.order.logisticsNumber,
  list: state.order.logisticsList
});

const mapDispatchToProps = dispatch => ({
  getLogisticsInfo: (id) => {
    dispatch(getLogisticsInfo(id))
  },
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Logistics);
